<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes myAnimation{
            50%{
                top: -3px;
            }
            100%{
                top: -6px;
            }
        }
    *{margin:0;
    }
    
    .top{
        width: 100%;
        height: 600px;
        margin-top: 70px;
        position: relative;
        background: url(https://static.zhihu.com/heifetz/assets/header_bg.0fe2c2cf.png) 50% 75%  no-repeat ;
    }
    .topps>p{
        margin-top: 20px;
        margin-left: 50%;
        position: relative;
        left:-50px;
    }
    .entry{
        width: 100%;
        height: 200px;

    }
    .topps{
        width: 100%;
    }
    .entryLi{
        width: 300px;
        height: 100px;
        font-size: 35px;
        float: left;
        text-align: center;
        padding-left: 100px;
    }

    .otherContent{
        width: 800px;
        height: 600px;
    }
    #extendss{
        list-style: none;
        width: 1000px;
        height: 600px;
        
    }
    .otherLi{
        width: 320px;
        height: 380px;
        float: left;
        position: relative;
        box-shadow: 1px 1px 3px #ccc;
        margin-left: 100px;
        margin-top: 30px;
        border-radius: 5%;
    }
    .otherImg{
        width: 300px;
        height: 200px;
        padding-left: 12px;
        padding-top: 13px;
    }
    .smallPicture{
        width: 24px;
        height: 24px;
        position: relative;
        top: 5px;
        padding-left: 20px;
    }
    .bottom_img{
        width: 300px;
        height: 24px;
        margin-top: 8px;
    }
    .bottom_img>svg{
        margin-left:10px;
        position: relative;
        top: 5px;
    }
    .extend_home{
        width: 1000px;
        height: 100%;
        position: relative;
        left: 50%;
        margin-left: -500px;
    }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Mock.js/1.0.1-beta3/mock-min.js"></script>
    <script>
         
     $(function(){
        var Random = Mock.Random
        Mock.mock("http://localhost:5500/api/getAllUsers",function(){
        var result = []
        for(var i=0;i<6;i++){
            var journalism = Mock.mock({
                'title':Random.csentence(5,10),
                'content':Random.cparagraph(30),
                 "wordList|1-10000":100,
                 "filterCount|1-4000000":100000,
                 "readCount|1-80000000":200000

            })
            result.push(journalism)
        }
        return result  
    })


    $.ajax({
        url:'http://localhost:5500/api/getAllUsers',
        type:'get',
        dataType:'json',
        success:function(e){
            // console.log(e)
            var strHTML = ''
            for(var i=0;i<e.length;i++){
                strHTML +=`<li class="otherLi">
                    <img class="otherImg" src="https://pic4.zhimg.com/80/v2-5957001ac5a8ff768c31c51df4a6a17d_qhd.jpg" alt="">
                    <p style="font-size: 20px; font-family: 黑体; padding-left: 15px;">${e[i].title}</p>
                    <p style="width: 280px; height: 80px;padding-left: 17px; overflow: hidden; font-size: 12px; margin-top: 5px; line-height: 20px;">${e[i].content}</p>
                    <div class="bottom_img">
                        <img class="smallPicture" src="https://pic1.zhimg.com/50/v2-5decb644175057fe1dcf0ffe31df1fae_s.jpg?source=54b3c3a5" alt="">
                        <span style="margin-left: 20px;">Canva</span>
                        <svg t="1597892970926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10113" width="24" height="24"><path d="M769.303854 169.610928l-98.703249-7.941021a31.9719 31.9719 0 0 1-18.580669-7.887068l-74.276718-65.485444c-35.77156-31.537282-89.280531-32.004871-125.596612-1.096037l-75.408723 64.179592a31.9719 31.9719 0 0 1-18.715551 7.561355l-98.82714 6.216536c-47.594169 2.993369-85.760624 40.499405-89.585263 88.034626l-7.940022 98.703249a31.9719 31.9719 0 0 1-7.887068 18.580669l-65.485444 74.277717c-31.537282 35.77156-32.004871 89.279532-1.096037 125.596612l64.179592 75.408723a31.9719 31.9719 0 0 1 7.561355 18.713553l6.216536 98.828139c2.993369 47.595168 40.499405 85.761624 88.034626 89.585263l98.703249 7.940021a31.9719 31.9719 0 0 1 18.580669 7.887068l74.277717 65.485445c35.77156 31.538281 89.279532 32.004871 125.596612 1.096037l75.408723-64.178594a31.9719 31.9719 0 0 1 18.713553-7.561354l98.828139-6.216536c47.595168-2.994368 85.761624-40.500404 89.585263-88.035625l7.940021-98.703249a31.9719 31.9719 0 0 1 7.887068-18.580669l65.485445-74.276718c31.538281-35.77156 32.004871-89.280531 1.096037-125.596612l-64.178594-75.408723a31.9719 31.9719 0 0 1-7.561354-18.715551l-6.216536-98.82714c-2.994368-47.594169-40.500404-85.760624-88.035625-89.585263z m24.217715 93.598735l6.216536 98.827141a95.915699 95.915699 0 0 0 22.684063 56.144654l64.178593 75.408723c10.302945 12.105361 10.148081 29.941684-0.364679 41.865204l-65.485445 74.277717a95.915699 95.915699 0 0 0-23.660205 55.74001l-7.94102 98.703249c-1.27488 15.846073-13.996698 28.347086-29.861755 29.345208l-98.82714 6.216536a95.915699 95.915699 0 0 0-56.144654 22.684063l-75.408723 64.178593c-12.105361 10.302945-29.941684 10.148081-41.865204-0.364679l-74.276718-65.485445a95.915699 95.915699 0 0 0-55.741009-23.660205l-98.703249-7.94102c-15.845074-1.27488-28.347086-13.996698-29.344209-29.861755l-6.217535-98.82714a95.915699 95.915699 0 0 0-22.683064-56.144654l-64.179592-75.408723c-10.302945-12.105361-10.147082-29.941684 0.365678-41.865204l65.485445-74.276718a95.915699 95.915699 0 0 0 23.659205-55.741009l7.941021-98.703249c1.27488-15.845074 13.997697-28.347086 29.861754-29.344209l98.827141-6.217535a95.915699 95.915699 0 0 0 56.144654-22.683064l75.408723-64.179592c12.105361-10.302945 29.941684-10.147082 41.865204 0.365678l74.277717 65.485445a95.915699 95.915699 0 0 0 55.74001 23.659205l98.703249 7.941021c15.846073 1.27488 28.347086 13.997697 29.345208 29.861754z" fill="#2600FF" p-id="10114"></path><path d="M711.362779 412.017875c12.456052 12.26522 12.734807 32.227675 0.718368 44.834595l-0.368676 0.379666-189.233681 192.185087c-12.030426 12.21926-31.52729 12.752791-44.206147 1.299858l-0.382663-0.349693L346.085823 527.436433c-12.91365-12.043415-13.618031-32.274634-1.574616-45.187285 11.922521-12.783764 31.869989-13.603044 44.797627-1.932301l0.389658 0.357685 109.050155 101.70561 167.401869-170.011575c12.264221-12.457051 32.227675-12.734807 44.833596-0.718369l0.379666 0.367677z" fill="#CDCBFF" p-id="10115"></path></svg>
                    </div>
                </li>`
            }
            
            $('#extendss').html(strHTML)
            $('#entrys').html(`<li class="entryLi"><span>${e[0].wordList}</span><br/> <span>词条</span></li>
                <li class="entryLi"><span>${e[0].filterCount}</span> <br/><span>编辑次数</span></li>
                <li class="entryLi"><span>${e[0].readCount}</span><br> <span>阅读量</span></li>`)
        },
        error:function(){

        }
    })


    $('#extendss').on("mouseover",'.otherLi',function(){
        //  this.style.top = '-2px'
        //  this.style.left = '-2px'
        //  this.style.boxShadow = '0px 0px 3px #ccc'
        this.style.animation = "myAnimation 1s"
        // console.log(this.style.)
    })

    $('#extendss').on("mouseout",'.otherLi',function(){
         this.style.top = '2px'
         this.style.left = '2px'
         this.style.boxShadow = "box-shadow: 1px 1px 3px #ccc"
        // console.log(this.style.)
    })

    // var lis = document.querySelectorAll('.otherLi')
    // console.log(lis)
    // for(var j=0;j<lis.length;j++){
    //     lis[j].onmouseover = function(){
    //         this.style.animation ="myAnimation 3s linear"
    //     }
    // }
     })
    </script>

</head>
<body>
        <!-- 通栏 -->
        <div id='Navigation'></div>
 
        


        <div class="top">
            <div class="topps"><img style="width: 80px; height: 80px; position: relative; left: 50%; margin-left: -40px; margin-top: 50px;" src="https://static.zhihu.com/heifetz/assets/logo@2x.9ae202d9.png" alt="">
                <p style="font-size: 35px; left: -65px;">知遇百科</p>
                <p style="font-size: 20px; left: -110px; font-family: 宋体; margin-top: 10px;">一部用来体验发现的百科全书</p>
        </div>
        </div>


        <!-- 百科优质词条 -->
        <div id="entry">
            <p style="position: relative; left: 50%;margin-left: -150px; font-size: 45px; width: 600px;">百科优质词条</p>
            <ul id="entrys" style="list-style: none; width: 100%; height: 100px; margin-top: 50px; position: relative; left: 50%;margin-left: -700px;">
                <li class="entryLi"><span>11914</span><br/> <span>词条</span></li>
                <li class="entryLi"><span>19529</span> <br/><span>编辑次数</span></li>
                <li class="entryLi"><span>111565989</span><br> <span>阅读量</span></li>
            </ul>
            <p style="position: relative; left: 50%;margin-left: -300px; font-size: 20px; width: 800px; font-family: 黑体; margin-top: 20px;">知遇百科是话题简介的延伸，是由狱友共同编辑的专业、客观的百科内容</p>
        </div>



        <!-- 扩展坞 -->
        <div class="extend_home">
            <ul id="extendss">
                <li class="otherLi">
                    <img class="otherImg" src="https://pic4.zhimg.com/80/v2-5957001ac5a8ff768c31c51df4a6a17d_qhd.jpg" alt="">
                    <p style="font-size: 20px; font-family: 黑体; padding-left: 15px;">孟菲斯风格</p>
                    <p style="width: 280px; height: 80px;padding-left: 17px; overflow: hidden; font-size: 12px; margin-top: 5px; line-height: 20px;">孟菲斯（Memphis）是20世纪80年代由爱多尔·索塔萨斯（Ettore Sottsass）带领的一群青年设计师组成的意大利后现代主义设计集团，
                        后成为 20 世纪 80 年代影响西方社会艺术设计潮流的一股力量，代表了意大利设计的新发展趋向，
                        是国际公认的后现代主义设计潮流的代表之一。</p>
                    <div class="bottom_img">
                        <img class="smallPicture" src="https://pic1.zhimg.com/50/v2-5decb644175057fe1dcf0ffe31df1fae_s.jpg?source=54b3c3a5" alt="">
                        <span style="margin-left: 20px;">Canva</span>
                        <svg t="1597892970926" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10113" width="24" height="24"><path d="M769.303854 169.610928l-98.703249-7.941021a31.9719 31.9719 0 0 1-18.580669-7.887068l-74.276718-65.485444c-35.77156-31.537282-89.280531-32.004871-125.596612-1.096037l-75.408723 64.179592a31.9719 31.9719 0 0 1-18.715551 7.561355l-98.82714 6.216536c-47.594169 2.993369-85.760624 40.499405-89.585263 88.034626l-7.940022 98.703249a31.9719 31.9719 0 0 1-7.887068 18.580669l-65.485444 74.277717c-31.537282 35.77156-32.004871 89.279532-1.096037 125.596612l64.179592 75.408723a31.9719 31.9719 0 0 1 7.561355 18.713553l6.216536 98.828139c2.993369 47.595168 40.499405 85.761624 88.034626 89.585263l98.703249 7.940021a31.9719 31.9719 0 0 1 18.580669 7.887068l74.277717 65.485445c35.77156 31.538281 89.279532 32.004871 125.596612 1.096037l75.408723-64.178594a31.9719 31.9719 0 0 1 18.713553-7.561354l98.828139-6.216536c47.595168-2.994368 85.761624-40.500404 89.585263-88.035625l7.940021-98.703249a31.9719 31.9719 0 0 1 7.887068-18.580669l65.485445-74.276718c31.538281-35.77156 32.004871-89.280531 1.096037-125.596612l-64.178594-75.408723a31.9719 31.9719 0 0 1-7.561354-18.715551l-6.216536-98.82714c-2.994368-47.594169-40.500404-85.760624-88.035625-89.585263z m24.217715 93.598735l6.216536 98.827141a95.915699 95.915699 0 0 0 22.684063 56.144654l64.178593 75.408723c10.302945 12.105361 10.148081 29.941684-0.364679 41.865204l-65.485445 74.277717a95.915699 95.915699 0 0 0-23.660205 55.74001l-7.94102 98.703249c-1.27488 15.846073-13.996698 28.347086-29.861755 29.345208l-98.82714 6.216536a95.915699 95.915699 0 0 0-56.144654 22.684063l-75.408723 64.178593c-12.105361 10.302945-29.941684 10.148081-41.865204-0.364679l-74.276718-65.485445a95.915699 95.915699 0 0 0-55.741009-23.660205l-98.703249-7.94102c-15.845074-1.27488-28.347086-13.996698-29.344209-29.861755l-6.217535-98.82714a95.915699 95.915699 0 0 0-22.683064-56.144654l-64.179592-75.408723c-10.302945-12.105361-10.147082-29.941684 0.365678-41.865204l65.485445-74.276718a95.915699 95.915699 0 0 0 23.659205-55.741009l7.941021-98.703249c1.27488-15.845074 13.997697-28.347086 29.861754-29.344209l98.827141-6.217535a95.915699 95.915699 0 0 0 56.144654-22.683064l75.408723-64.179592c12.105361-10.302945 29.941684-10.147082 41.865204 0.365678l74.277717 65.485445a95.915699 95.915699 0 0 0 55.74001 23.659205l98.703249 7.941021c15.846073 1.27488 28.347086 13.997697 29.345208 29.861754z" fill="#2600FF" p-id="10114"></path><path d="M711.362779 412.017875c12.456052 12.26522 12.734807 32.227675 0.718368 44.834595l-0.368676 0.379666-189.233681 192.185087c-12.030426 12.21926-31.52729 12.752791-44.206147 1.299858l-0.382663-0.349693L346.085823 527.436433c-12.91365-12.043415-13.618031-32.274634-1.574616-45.187285 11.922521-12.783764 31.869989-13.603044 44.797627-1.932301l0.389658 0.357685 109.050155 101.70561 167.401869-170.011575c12.264221-12.457051 32.227675-12.734807 44.833596-0.718369l0.379666 0.367677z" fill="#CDCBFF" p-id="10115"></path></svg>
                    </div>
                </li>
            </ul>
        </div>
        <script>
            $("#Navigation").load("Navigation.html");
        </script>
</body>

</html>